<template>
  <div style="padding: 20px 30px;">
      <h1>机器人列表</h1>
      <div class="robot-container">
          <div class="robot" v-for="(item, index) in robotList" :key="index">
              <image-preview :src="item.image" :width="280" :height="280"/>
              <div @click="listRobotQueueNow(item)">
                <h2>{{ item.title }}</h2>
                <p>在线状态：<span class="status">{{ item.onlineStatus == 1 ? "在线" : "离线" }}</span></p>
                <p>启用状态：<span class="status">{{ item.enableStatus == 1 ? "启用" : "离线" }}</span></p>
                <p>部门：<span class="region">{{ item.deptName }}</span></p>
              </div>
          </div>
      </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { listAllRobot } from "@/api/qd/robot"

const loading = ref(true);
const robotList = ref([]);

/** 查询机器人列表 */
const getList = () => {
  loading.value = true;
  listAllRobot().then(response => {
    robotList.value = response.data;
    loading.value = false;
  });
}

onMounted(() => {
  getList()
})

/** 查看机器人实时队列 */
const listRobotQueueNow = (item) => {
  window.open("/qd/robot/simulation/" + item.sn, "_blank");
}

</script>

<style scoped>
.robot-container {
  display: flex;
  gap: 20px;
}

.robot {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  width: 300px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.robot div {
  cursor: pointer;
}

/* .robot img {
  width: 280px;
  border-radius: 10px;
} */

.robot h2 {
  color: #333;
}

.status,
.number,
.region {
  font-weight: bold;
}

.status.online {
  color: green;
}

.status.offline {
  color: red;
}
</style>